<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
    <th:block th:include="include :: header('新增活动')" />
    <th:block th:include="include :: datetimepicker-css" />
    <th:block th:include="include :: summernote-css" />
</head>
<body class="white-bg">
    <div class="wrapper wrapper-content animated fadeInRight ibox-content">
        <form class="form-horizontal m" id="form-activity-add">
            <div class="form-group">    
                <label class="col-sm-3 control-label">活动标题：</label>
                <div class="col-sm-8">
                    <input name="name" class="form-control" type="text">
                </div>
            </div>
            <div class="form-group">    
                <label class="col-sm-3 control-label">开始时间：</label>
                <div class="col-sm-8">
                    <div class="input-group date">
                        <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
                        <input name="startTime" class="form-control" placeholder="yyyy-MM-dd" type="text">
                    </div>
                </div>
            </div>
            <div class="form-group">    
                <label class="col-sm-3 control-label">结束时间：</label>
                <div class="col-sm-8">
                    <div class="input-group date">
                        <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
                        <input name="endTime" class="form-control" placeholder="yyyy-MM-dd" type="text">
                    </div>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">封面(276*156)：</label>
                <div class="col-sm-8">
                    <button type="button" class="layui-btn" id="upload_main">上传图片</button>
                    <div class="layui-upload-list">
                        <input type="hidden" id="mainUrl" name="mainUrl">
                        <p id="show_main"></p>
                    </div>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">活动对象：</label>
                <div class="col-sm-8">
                    <input name="object" class="form-control" type="text">
                </div>
            </div>
            <div class="form-group">
                <input id="details" name="details" type="hidden">
                <label class="col-sm-3 control-label">详情：</label>
                <div class="col-sm-8">

                    <div class="ibox float-e-margins">
                        <div class="ibox-title">
                            <button id="edit" class="btn btn-primary btn-xs m-l-sm" onclick="editDetails()" type="button">编辑</button>
                            <button id="save" class="btn btn-primary  btn-xs" onclick="saveDetails()" type="button">保存</button>
                        </div>
                        <div class="ibox-content" id="eg">

                            <div class="click2edit wrapper">

                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </form>
    </div>
    <th:block th:include="include :: footer" />
    <th:block th:include="include :: datetimepicker-js" />
    <th:block th:include="include :: summernote-js" />
    <script type="text/javascript">
        $(document).ready(function () {
            $('.summernote').summernote({
                lang: 'zh-CN'
            });
        });

        function sendFile(files){
            data = new FormData();
            data.append("file", files);

            $.ajax({
                data: data,
                type: "POST",
                url: ctx+'/common/upload',
                cache: false,
                contentType: false,
                processData: false,
                success: function (data) {
                    $('.click2edit').summernote('insertImage',data.url);
                },
                error:function(){
                    layer.alert('上传失败!');
                    return;
                }

            });
        }
        var editDetails = function () {
            $("#eg").addClass("no-padding");
            $('.click2edit').summernote({
                lang: 'zh-CN',
                focus: true,
                callbacks:{
                    onImageUpload: function(files) {
                        sendFile(files[0]);
                    }
                }
            });
        };
        var saveDetails = function () {
            $("#eg").removeClass("no-padding");
            var aHTML = $('.click2edit').summernote('code');
            $('.click2edit').summernote('destroy');
            $("#details").val(aHTML)
        };
        var prefix = ctx + "system/activity"
        $("#form-activity-add").validate({
            focusCleanup: true
        });

        function submitHandler() {
            if ($.validate.form()) {
                $.operate.save(prefix + "/add", $('#form-activity-add').serialize());
            }
        }

        $("input[name='startTime']").datetimepicker({
            format: "yyyy-mm-dd 00:00:00",
            minView: "month",
            autoclose: true
        });

        $("input[name='endTime']").datetimepicker({
            format: "yyyy-mm-dd 23:59:59",
            minView: "month",
            autoclose: true
        });

        layui.use('upload', function () {
            var $ = layui.jquery
                , upload = layui.upload;


            //普通图片上传
            upload.render({
                elem: '#upload_main'
                , url: ctx+'/common/upload' //改成您自己的上传接口
                , done: function (res) {
                    //如果上传失败
                    if (res.code > 0) {
                        return layer.msg('上传失败');
                    }
                    //上传成功
                    $("#show_main").html("<img src='" + res.url + "' style='width:80px;height:80px;'>");
                    $("#mainUrl").val(res.url);
                }
            });
        })

    </script>
</body>
</html>